<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <style>
        /* 清除默认标签样式 */
        * {
            margin: 0;
            padding: 0;
        }

        .产品展示-tab栏 {
            width: 590px; /* 宽高 */
            height: 340px;
            margin: 20px auto; /* 外边距, 版心居中 */
            border: 1px solid #e4e4e4; /* 边框线 */
        }

        .标题导航 {
            width: 100%; /* 宽度 随父级盒子 */
            height: 60px; /* 高 */
            line-height: 60px; /* 行高与高相同, 文字垂直居中 */

            display: flex; /* flex布局 */
            justify-content: space-between; /* flex布局 主轴对齐方式 */
        }

        .标题导航 h3 {
            font-size: 24px; /* 文字大小 */
            font-weight: normal; /* 文字不加粗 */
            margin-left: 20px; /* 左外边距 */
        }

        .标题导航 ul {
            list-style: none; /* 去除列表默认的 项目图标 */
            display: flex; /* flex布局 */
            justify-content: flex-end; /*主轴对齐方式:末尾对齐, 这里效果右对齐*/
        }

        .标题导航 ul li {
            font-size: 14px; /* 文字大小 */
            margin: 0 20px; /* 外边距2值写法: 上下 左右 */
        }

        .标题导航 ul li a {
            text-decoration: none; /* 去除 超链接默认的下划线 */
            border-bottom: 2px solid transparent; /* 下边框线, 这里边框线设置是 透明*/
            color: #333; /* 文字颜色 */
        }

        .标题导航 ul li a.显示 {
            border-color: #e1251b; /* 文字颜色 大小 */
            color: #e1251b;
        }

        .产品展示区域 {
            padding: 0 16px; /* 内边距 */
        }

        .产品展示区域 .tab栏-产品内容 {
            display: none; /* 显示:隐藏 */
        }

        .产品展示区域 .tab栏-产品内容.显示 {
            display: block; /* 显示:块级, 这里是显示看见 */
        }
    </style>
</head>
<body>

<div class="产品展示-tab栏">
    <div class="标题导航">
        <h3>每日特价</h3>
        <ul>
<!--            data 自定义属性, 值作为数组的下标, JS里实现切换画面功能-->
            <li><a data-id="0" class="显示" href="javascript:;">精选</a></li>
            <li><a data-id="1" href="javascript:;">美食</a></li>
            <li><a data-id="2" href="javascript:;">百货</a></li>
            <li><a data-id="3" href="javascript:;">个护</a></li>
            <li><a data-id="4" href="javascript:;">预告</a></li>
        </ul>
    </div>
    <div class="产品展示区域">
        <div class="tab栏-产品内容 显示"><img src="../../4_DOM事件监听/素材/tab00.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../../4_DOM事件监听/素材/tab01.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../../4_DOM事件监听/素材/tab02.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../../4_DOM事件监听/素材/tab03.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../../4_DOM事件监听/素材/tab04.png" alt=""/></div>
    </div>
</div>


<!--
tab栏切换改造
需求：优化程序，将tab切换案例改为事件委托写法
思路：
①：给a的父级 注册点击事件，采取事件委托方式
②： 如果点击的是A , 则进行排他思想，删除添加类
③： 注意判断的方式 利用 e.target.tagName
④： 因为没有索引号了，所以这里我们可以自定义属性，给5个链接添加序号
⑤： 下面大盒子获取索引号的方式 e.target.dataset.id 号， 然后进行排他思
-->

<!--
鼠标经过事件：
    mouseover 和 mouseout 会有冒泡效果
    mouseenter 和 mouseleave 没有冒泡效果
-->
<script>

    // 获取DOM元素
    const 标题选项卡 = document.querySelector('.产品展示-tab栏 .标题导航 ul')
    const 数组_产品展示区域 = document.querySelectorAll('.产品展示区域 div')

    // 监控父级, 通过事件冒泡 修改子级的属性. 注意鼠标经过事件有2类,不要选错了
    标题选项卡.addEventListener('mouseover', function (事件对象) {
        console.log(事件对象.target) // 控制台输出,看属性信息
        console.log(事件对象.target.dataset.id) // 控制台输出,看自定义 id 的值

        // 判断子级是否 a标签, 因为这里要添加的类在 a标签里
        if (事件对象.target.tagName === 'A') {
            //获取DOM元素, 这里是选项卡切换显示设置
            const 选项卡 = document.querySelector('.产品展示-tab栏 .显示')
            选项卡.classList.remove('显示') // 删除标签, 有类名 "显示", 这个类
            事件对象.target.classList.add('显示') // 添加标签, "显示", 这个类

            //获取元素, 这里是产品展示区域切换显示设置
            const 产品图片 = document.querySelector('.产品展示区域 .显示')
            产品图片.classList.remove('显示') // 删除标签有类名 "显示", 这个类
            数组_产品展示区域[事件对象.target.dataset.id].classList.add('显示') // 触发 鼠标经过事件 的标签,对应的产品展示图片 添加 "显示" 这个类
            //           这里 id的值,相当于数组的索引号
        }
    })
</script>
</body>
</html>